<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#24262b"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item style="color: #ffd04b;">基于Django-admin反向兼容后台管理系统</el-menu-item>
      <el-submenu index="1">
						<template slot="title">个人中心</template>
						<el-menu-item index="1-1">账户信息</el-menu-item>
						<el-menu-item index="1-2"><router-link tag="div" to="/">回到主页</router-link></el-menu-item>
						<el-menu-item index="1-3" @click="logout">注销</el-menu-item>
					  </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default{
    name:"Vheader",
    data(){
      return{
        activeIndex: '0',
        activeIndex2: '0'
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      logout(){
        this.$store.commit('userLogOut')

        let _this = this
        const loading = _this.$loading({
          lock: true,
          text: '正在退出系统...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          _this.$router.replace({name:"login"})
        }, 1500);


      }

    },
    mounted() {
      console.log("header")
    }
  }
</script>

<style>
  .el-menu--horizontal>.el-submenu {
      float: right;
  }


</style>
